<template>
  <div class="auth-node-wrap">
    <div class="header">审批流程</div>
    <div class="anth-node">
      <div class="title">
        <span>发起申请</span>
        <span class="label" style="color: #999">{{ $setTime(detail.approvalTime) }}</span>
      </div>
      <div class="node-w flex">
        <div class="node">
          <div class="name-w" style="display: inline-block; text-align: center">
            <a-avatar :size="30">
              <img alt="" :src="detail.headerImage || headerImage" />
            </a-avatar>
            <p class="name">{{ detail.promoterName }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="anth-node" v-for="(processNode, j) in detail.processNodes" :key="j">
      <div class="title">
        <span>审批中</span>
        <span class="label">{{ AuditType[processNode.auditType] }}</span>
      </div>
      <div class="node-w flex">
        <div class="node" v-for="(node, i) in processNode.processAuditors" :key="i">
          <div style="display: inline-block; text-align: center">
            <a-avatar :size="30">
              <img alt="avatar" :src="node.headerImage || headerImage" />
            </a-avatar>
            <p class="name">{{ node.userName }}</p>
            <p class="status highlight" v-if="node.auditResult === true">通过</p>
            <a-popover v-else-if="node.auditResult === false">
              <p class="status warningColor">拒绝<i class="icon icon-zhuyi"></i></p>
              <template #content>
                <p>{{ node.message }}</p>
              </template>
            </a-popover>
            <p class="status" v-else>未审核</p>
          </div>
          <p class="time" v-if="node.auditTime">{{ $setTime(node.auditTime) }}</p>
          <icon-double-right class="step" v-if="i < processNode.processAuditors.length - 1" />
        </div>
      </div>
    </div>
    <div class="anth-node">
      <div class="title">抄送</div>
      <div class="node-w flex-wrap">
        <div class="node" style="width: 80px" v-for="(node, i) in detail.copyTos" :key="i">
          <div style="display: inline-block; text-align: center">
            <a-avatar :size="30">
              <img alt="avatar" :src="node.headerImage || headerImage" />
            </a-avatar>
            <p class="name">{{ node.userName }}</p>
          </div>
          <p class="time">{{ $setTime(node.copyTime) }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { AuditType } from '@/views/workFlow/types'
  const props = defineProps({
    detail: {
      type: Object,
      default: () => {},
    },
  })
  const headerImage = 'https://cdn2.selleroa.com/yfni/test/170303854699906f3a2.png'
</script>

<style lang="less" scoped>
  .auth-node-wrap {
    .header {
      margin: 20px 0;
      padding-left: 10px;
      border-left: 4px solid rgb(var(--primary-6));
    }
    .anth-node {
      margin-bottom: 20px;
      .title {
        margin-bottom: 5px;
      }
      .label {
        font-size: 12px;
        margin-left: 20px;
      }
    }
    .node {
      font-size: 12px;
      width: 100px;
      position: relative;
      .name,
      .time {
        margin-top: 2px;
        color: #999;
      }
      .step {
        position: absolute;
        right: 26px;
        top: 8px;
        font-size: 14px;
        color: #999;
      }
      .icon-zhuyi {
        font-size: 14px;
        margin-left: 5px;
      }
    }
  }
</style>
